<template>
  <div class="edit-question-container-div">
    <div class="edit-question-left-div">
      <div class="question-type-head">
        <span v-show="isBlank">
          填空题
        </span>
        <span v-show="isSingle">
          单选题
        </span>
        <span v-show="isMulti">
          多选题
        </span>
      </div>
      <van-field
          type="textarea"
          v-model="q.title"
          required
          rows="1"
          autosize
          label="题干"
          maxlength="100"
          placeholder="请填写题目题干"
          clearable
          :rules="rules"
      />
      <van-field v-if="isBlank">
        <template v-slot:input>
          <el-input disabled placeholder="输入框" />
        </template>
      </van-field>
      <div v-if="!isBlank">
        <van-field
            v-for="(item, index) in q.options"
            type="textarea"
            rows="1"
            autosize
            v-model="item.info"
            maxlength="100"
            placeholder="请填写题目选项"
            clearable
            :rules="[{
              formatter: (s) => {
                s = s.trim()
                item.value = s
                return s
              },
              required: true,
              message: '请填写题目选项',
              trigger: 'onBlur'
            }]"
        >
          <template v-slot:label>
            <div style="display: flex">
              <van-checkbox disabled v-show="isSingle"/>
              <van-checkbox disabled shape="square" v-show="isMulti"/>
              <span>选项{{index}}</span>
            </div>
          </template>
          <template v-slot:left-icon>
            <van-icon name="delete-o" size="20" color="red" @click="delOpt(index)"/>
          </template>
        </van-field>
        <van-button icon="plus" type="primary" size="small" @click="addOption">添加选项</van-button>
      </div>
    </div>
    <div class="edit-question-right-div">
      <van-icon name="arrow-up" size="24" @click="$emit('up')"/>
      <van-icon name="arrow-down" size="24" @click="$emit('down')"/>
      <van-icon name="delete-o" size="24" color="red" @click="$emit('del')"/>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {showToast} from "vant";
import DBConst from "@/consts/DBConst";

export default defineComponent({
  name: "EditQuestion",
  props: {
    q: Object
  },
  data(){
    return {
      rules: [
        {
          formatter: (s) => {
            s = s.trim()
            this.q.title = s
            return s
          },
          required: true,
          message: '请填写题干',
          trigger: 'onBlur'
        }
      ]
    }
  },
  methods: {
    delOpt(index){
      if(this.q.options.length <= 2){
        showToast('选择题选项至少需2个')
      }else {
        this.q.options.splice(index, 1)
      }
    },
    addOption(){
      this.q.options.push({
        info: `选项${this.q.options.length + 1}`
      })
    }
  },
  computed: {
    isBlank(){
      return this.q.type === DBConst.QType.BLANK
    },
    isSingle(){
      return this.q.type === DBConst.QType.SINGLE
    },
    isMulti(){
      return this.q.type === DBConst.QType.MULTI
    }
  }
})
</script>



<style scoped lang="less">
@import "@/assets/style/less/all.less";
.edit-question-container-div{
  display: flex;
  flex-direction: row;
  .edit-question-left-div{
    .flex-item-fit-width();
  }
  .edit-question-right-div{
    .flex-item-fix();
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    >i:nth-child(n+2){
      margin-top: 10px;
    }
  }
}

.question-type-head {
  font-size: 16px;
}
</style>